/*
* @Date: 2021/1/24
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import './index.scss';

export default class extends React.Component {
  onBoxChange = (e, type) => {
    const { onChange } = this.props;
    const dom = e.currentTarget;
    let value = Number(dom.innerText);
    if (isNaN(value)) {
      value = 0;
    }
    onChange && onChange(value, type);
  }

  render() {
    const {
      marginTop = 0, marginLeft = 0, marginRight = 0, marginBottom = 0,
      paddingTop = 0, paddingLeft = 0, paddingRight = 0, paddingBottom = 0,
    } = this.props;
    return (
      <div className="layout-box">
        <div className="margin-top-box">
          <div
            contentEditable="true"
            className="margin-top-input"
            onInput={(e) => this.onBoxChange(e, 'marginTop')}
          >
            { marginTop }
          </div>
        </div>
        <div className="padding-top-box">
          <div
            contentEditable="true"
            className="padding-top-input"
            onInput={(e) => this.onBoxChange(e, 'paddingTop')}
          >
            { paddingTop }
          </div>
        </div>
        <div className="margin-left-box">
          <div
            contentEditable="true"
            className="margin-left-input"
            onInput={(e) => this.onBoxChange(e, 'marginLeft')}
          >
            { marginLeft }
          </div>
        </div>
        <div className="padding-left-box">
          <div
            contentEditable="true"
            className="padding-left-input"
            onInput={(e) => this.onBoxChange(e, 'paddingLeft')}
          >
            { paddingLeft }
          </div>
        </div>
        <div className="margin-bottom-box">
          <div
            contentEditable="true"
            className="margin-bottom-input"
            onInput={(e) => this.onBoxChange(e, 'marginBottom')}
          >
            { marginBottom }
          </div>
        </div>
        <div className="padding-bottom-box">
          <div
            contentEditable="true"
            className="padding-bottom-input"
            onInput={(e) => this.onBoxChange(e, 'paddingBottom')}
          >
            { paddingBottom }
          </div>
        </div>
        <div className="margin-right-box">
          <div
            contentEditable="true"
            className="margin-right-input"
            onInput={(e) => this.onBoxChange(e, 'marginRight')}
          >
            { marginRight }
          </div>
        </div>
        <div className="padding-right-box">
          <div
            contentEditable="true"
            className="padding-right-input"
            onInput={(e) => this.onBoxChange(e, 'paddingRight')}
          >
            { paddingRight }
          </div>
        </div>
      </div>
    )
  }
}
